<template>
  <div v-loading="isLoading" class="wrapper">
    <div class="narrow-card">
      <p>姓名：</p>
      <el-input v-model="signUpData.username" placeholder="请输入内容" />
      <p>密码：</p>
      <el-input v-model="signUpData.password" placeholder="请输入内容" show-password />
      <p>头像URL：</p>
      <el-input v-model="signUpData.avatar" placeholder="请输入内容" show-password />
      <p>权限：</p>
      <el-select v-model="signUpData.roles" placeholder="请选择" @change="selectChange">
        <el-option label="学生" value="stu" />
        <el-option label="教师" value="tch" />
      </el-select>
      <p>
        <el-button type="primary" @click="onSignUp">注册</el-button>
      </p>
    </div>

    <el-dialog title="请输入验证码" :visible.sync="showDialog.checkSelectDialog" @close="onCloseDiolog">
      <p>如果您要创建教师权限的账户，我们需要验证你的身份。</p>
      <p>请输入验证码：</p>
      <p>
        <el-input v-model="checkSelect.value" placeholder="请输入内容" />
      </p>
      <p>
        <el-button type="primary" @click="checkSelectPassword">验证</el-button>
      </p>

    </el-dialog>

  </div>
</template>

<script>
// 引用API
import { signUp } from '@/api/user'
export default {
  name: 'TchTest',
  data() {
    return {
      isLoading: false, // 页面正在加载
      signUpData: {
        username: '', // 账户
        password: '', // 密码
        avatar: '', // 头像URL
        roles: 'stu'// 权限
      },
      checkSelect: {
        value: '',
        check: false
      },
      showDialog: {
        checkSelectDialog: false
      }
    }
  },

  methods: {
    async onSignUp() {
      const data = {
        username: this.signUpData.username,
        password: this.signUpData.password,
        avatar: this.signUpData.avatar,
        roles: this.signUpData.roles
      }
      console.log(data)
      this.isLoading = true
      const callback = await signUp(data)
      this.$message({
        message: callback.data.message,
        type: callback.data.type
      })
      // console.log(callback.data)
      this.isLoading = false
    },
    selectChange(e) {
      // console.log(e)
      if (e === 'tch' && this.checkSelect.check === false) {
        this.showDialog.checkSelectDialog = true
      }
    },
    checkSelectPassword() {
      const password = '93517'
      if (this.checkSelect.value === password) {
        this.checkSelect.check = true
        this.$message({
          message: '验证码正确',
          type: 'success'
        })
        this.showDialog.checkSelectDialog = false
        return
      }
      this.$message({
        message: '验证码错误',
        type: 'warning'
      })
      this.showDialog.checkSelectDialog = false
    },
    onCloseDiolog() {
      if (this.checkSelect.check === false) {
        this.signUpData.roles = 'stu'
      }
    }

  }
}
</script>

<style scoped>
.wrapper {
  background-color: #2d3a4b;
  padding: 60px 10px 10px 10px;
  min-height: calc(100vh);
}
.card {
  background-color: #fff;
  padding: 24px;
  margin-bottom: 10px;
}
.narrow-card {
  background-color: #fff;
  margin: 0 auto 10px auto;
  max-width: 580px;
  padding: 24px;
}
.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
